Github Actionsでdeploy時にLighthouse計測をする
GitHub Actionsでdeploy時にLighthouse計測して、結果を表示してくれる
結果は一時的なwebページとしてURLが提供される
だからlocalで計測したのと同様にclickして詳細を展開するなどできる
mobile, PCなどの指定もできる
選択肢がいくつかある
@lhci/cli
primitiveなやつ
lighthouse-ci-action
@lhci/cliのwrapperっぽいやつ
localhostの実行とかできなさそうだった(知らんけど)
Lighthouse Check
Slack通知、S3連携なども入っている
めちゃくちゃ良いmrsekut.icon*2
やりたいこと
指定したページ全てでLighthouseの計測をする
折れ線グラフで遷移を見る、とかはいらない
前回との差分はみたい
Slackに通知
どの環境でLighthouseの計測が行われるか
urlsで指定できる
build, runしたあとにlocalhost
lighthouse-ci-actionだと無理かも
外部のURL上
Security Groupなどの設定をしている場合は一手間必要になる
https://qiita.com/gdtypk/items/aea503db22dfc79f4e9e
urlsで複数指定できるので、複数ページの計測を同時にできる
#??
そもそもこれGithub Actionでできるのか?
AWSのCIか何かを使ったほうが良かったりする?
developにmergeしたときに動かしてほしいが、毎回やってほしいわけでもない
budgetってなに?
https://web.dev/use-lighthouse-for-performance-budgets/
設定項目
https://github.com/GoogleChrome/lighthouse/blob/v5.5.0/lighthouse-core/config/default-config.js
slack通知する
https://tech-blog.yoshikiohashi.dev/posts/gatsbyjs-lighthouse-ci
Lighthouse Checkを使う
参考
参考にしてるサイト、だいたいversionが古いので注意mrsekut.icon
setup-nodeとかcheckoutとかもろもろ
Lighthouse CIを使用してサイト速度をコミット単位で確認する - Blog by yoshikiohashi